<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta name="referrer" content="never">
    <template th:replace="common/header"></template>
</head>
<body>

<nav class="navbar navbar-default">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">廉洁西昌</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li><a href="/admin">举报管理 <span class="sr-only">(current)</span></a></li>
                <li class="active"><a href="/admin/weixin-article">微信图文管理 </a></li>
            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>

<main class="container-fluid">
    <div class="row" style="margin-bottom: 20px">
        <button class="btn btn-primary pull-right" onclick="sync()"><i class="glyphicon glyphicon-refresh"></i> 同步微信公众号内容
        </button>
    </div>
    <table id="myTable" class="table table-hover table-bordered table-condensed text-center">
        <thead>
        <tr>
            <td width="40">ID</td>
            <td>封面图</td>
            <td>标题</td>
            <td>创建时间</td>
            <td>更新时间</td>
            <td width="150">操作</td>
        </tr>
        </thead>

    </table>

    <!--<div class="auto-refresh">-->
    <!--<label>-->
    <!--<input type="checkbox" id="autoRefresh"> 自动刷新列表-->
    <!--</label>-->
    <!--</div>-->

</main>
<template th:replace="common/footer"></template>

<script>
    $(document).ready(function () {
        dataTable = $('#myTable').DataTable({
            serverSide: true,
            order: [0, "desc"],
            stateSave: true,
            ajax: {
                url: '/admin/api/weixin-article'
            },
            columns: [
                {
                    data: 'id'
                }, {
                    data: 'thumbUrl',
                    render: function (data, type, row, meta) {
                        return '<img height="200" src="' + data + '">'
                    }
                }, {
                    data: 'title',
                    render: function (data, type, row, meta) {
                        return '<a target="_blank" href="' + row.url + '">' + data + ' </a>'
                    }
                }, {
                    data: 'createTime'
                }, {
                    data: 'updateTime'
                }, {
                    data: 'id',
                    render: function (data, type, row, meta) {
                        var html = '';
                        html += '<button class="btn btn-primary btn-xs" onclick="window.open(\'' + row.url + '\')">查看原文</button> ';
                        html += '<button class="btn btn-danger btn-xs" onclick="del(' + data + ')">删除</button> ';
                        return html
                    }
                }

            ]
        });
    });
    var view = function (id) {
        layer.open({
            type: 2,
            area: ['640px', '560px'],
            // maxmin: true, //开启最大化最小化按钮
            content: "/admin/weixin-article/" + id
        })
    };

    var del = function (id) {
        layer.confirm('确认删除本条举报？', {
            btn: ['确认', '取消'] //按钮
        }, function () {
            $.ajax({
                type: 'delete',
                url: '/admin/api/weixin-article/' + id,
                success: function (result) {
                    layer.alert(result.msg, function (index) {
                        dataTable.ajax.reload();
                        layer.close(index)
                    })
                }
            });
        })
    };
    var sync = function () {
        layer.msg('正在同步，请耐心等待', {
            icon: 16,
            time: 30000
            , shade: 0.01
        });
        $.ajax({
            url: '/admin/api/weixin-article/sync',
            success: function (result) {
                layer.closeAll();
                layer.alert(result.msg, function (index) {
                    dataTable.ajax.reload();
                    layer.close(index)
                })
            }
        });
    };


</script>
</body>
</html>
